<template>
    <ul class="list" >
        <li class="item" 
            :ref="item"
            v-for="item in letters" :key="item" 
            @click="handleclick"
            @touchstart="handletouchstart"
            @touchmove="handletouchmove"
            @touchend="handletouchend"
            >
            {{item}}
        </li>
    </ul>
</template>

<script>
export default {
  name: 'cityAlphabet',
  props:{
      cities:Object,
  },
  data() {
      return {
          touchStatus:false
      }
  },
  computed:{
      letters(){
          const letters=[]
          for (let i in this.cities) {
            letters.push(i)
              }
          return letters
      }
  },
  methods:{
      handleclick(e){
          //console.log(e.target.innerText)
          this.$emit("change",e.target.innerText)
      },
      handletouchstart(){
          this.touchStatus=true
      },
      handletouchmove(e){
          if(this.touchStatus){
            const startY = this.$refs['A'][0].offsetTop
            const touchY = e.touches[0].clientY-79
            const index = Math.floor((touchY-startY)/17)-7
            if(index>=0&&index<this.letters.length){
                 this.$emit('change',this.letters[index])
            }
              //console.log(index) //手指滑动列表实时滚动
          }
      },
      handletouchend(){
          this.touchStatus=false
      },
    

  }

}
</script>

<style scoped>
    .list{
        display: flex;
        flex-direction: column ;
        justify-content: center;
        position: absolute;
        top: 4rem;
        right: 0;
        bottom: 0;
        width: .3rem;
    }
    .item{
        line-height: .34rem;
        text-align: center;
        color:#00bcd4;
    }
</style>
